<style>
    .hidden {

	}

	.story pre {
		margin-top: 0px;
	}
	.scenario pre {
		margin-top: 0px;
	}	
    .story {
		margin-left: 20px;
		padding-left: 4px;
		border: 1px solid #333333;
	}
	
	.scenario {
		margin-left: 40px;
		margin-right: 20px;
		margin-top: 4px;
	}
	
	.scenarios {
		margin-top: 0px;
		padding: 0px;
	}
	
	h3 {
		margin: 0;
	}
	
	.passed {
		background-color: #FFFFFF;
	}
	
	.pending {
		background-color: #FFFFFF;
	}
</style>

<div class="pending">
	<h1>com.cool_cool-app-1.0-SNAPSHOT</h1>
</div>
<div id="stories">
	<div class="story pending">
	    <div>
		   <b>Story1.</b> <a href="">Source Story</a>
	    </div>
	    <pre class="story_text hidden">
As a 
I want
So that</pre>
	    <div id="Story1.scenarios" class="hidden scenarios">
		    <h3>Scenarios</h3>
			<div class="scenario passed">
			  <div>
				 <b>Clickty-Clack.</b> <a href="">Source Story</a>
			  </div>
			  <pre class="scenario_text">
Given a stuff
When I click next
I get stuff</pre>
			</div>
			<div class="scenario passed">
			  <div>
				 <b>Something 2.</b> <a href="">Source Story</a>
			  </div>
			  <pre class="scenario_text">
Given a more
When I click next
I get dont get stuff
			  </pre>
			</div>				
		</div>
		 
	</div>
</div>
